<template>

  <nav-bar class="detail-nav">
    <div slot="left" class="left" @click="leftclick">
      <img src="~assets/img/common/back.svg" alt="">
    </div>
    <div slot="center" class="center">
      <div v-for="(item,index) in title" class="item" @click="centerclick(index)"
        :class="{active:index === currentindex}">
        {{item}}</div>

      <!--遍历项目之后，项目本身就带有index  currentindex是表示记录当前的一项 -->
    </div>
  </nav-bar>

</template>

<script>
  import NavBar from 'components/content/nav-bar/NavBar.vue'
  export default {
    name: 'DetailNavBar',
    data() {
      return {

        currentindex: 0,
      }
    },
    props: {
      title: {
        type: Array,
        default() { }
      }
    },
    components: { NavBar },
    methods: {
      leftclick() {
        this.$router.back()
      },
      centerclick(index) {
        this.currentindex = index
        this.$emit('centerclick', index)

      }
    },
  }
</script>

<style scoped>
  .center {
    display: flex;
  }

  .item {
    flex: 1;
  }

  .left img {
    width: 24px;
    margin: 10px 10px 0;
  }

  .active {
    color: pink;
  }

  /* .detail-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: #fff;
  } */
</style>